<template>
  <el-container style="position:absolute;right:25%;left:25%;width:50%;height: 100%;background-color:#ffffff;">
    <el-main>
      <el-container>
        <el-header
          height="50px"
          style="display: flex;justify-content:space-between;"
        >
          <div style="display: flex;flex-direction: row;">
            <img
              src="@/assets/img/提问.png"
              style="width: 50px;height: 50px;"
            />
            <label style="font-size:35px;color:gray">提问</label>
          </div>
          <el-button
            type="text"
            @click="open1"
            style="font-size: 15px;color: #88B372;"
          >想上传图片？点这里！</el-button>
        </el-header>
        <el-main>
          <el-input
            type="textarea"
            placeholder="请将问题概述出标题"
            v-model="text.form.title"
            maxlength="50"
            show-word-limit
            style="font-size:26px"
          ></el-input>
          <el-input
            type="textarea"
            placeholder="请将问题详细描述"
            v-model="detailedcontent"
            style="margin-top:25px;font-size:20px;"
            :autosize="{ minRows: 12}"
          ></el-input>
          <el-input
            type="url"
            autocomplete="off"
            size="mini"
            v-model="url"
            style="width:300px;margin-top:25px;font-size:16px;"
          ><template slot="prepend">图片Url:</template></el-input>
          <el-select
            v-model="value"
            filterable
            allow-create
            size="small"
            default-first-option
            @change="getid"
            style="margin-left:18%;display:inline-block"
            placeholder="请选择题目所属科目"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.sectionName"
              :value="item.sid"
            >
            </el-option>
          </el-select>
        </el-main>
        <el-footer align="center">
          <el-button
            type="primary"
            id="button"
            @click="uploadcheck"
            class="el-icon-upload el-icon--right"
            style="width:200px; margin-top:20px"
          > 上传</el-button>
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import { request } from 'network/request'
export default {
  name: 'AskQuestion',
  mounted () {
    request({
      url: '/section'
    }).then(res => {
      this.options = res.data.sections
    })
  },
  data () {
    return {
      detailedcontent: '',
      url: '',
      list: [],
      numberValidateForm: {
        picture: ''
      },
      text: {
        form: {
          sectionId: null,
          title: '',
          content: ''
        }
      },
      value: '',
      img: [],
      options: [],
      createnewsection: {
        sectionName: ''
      }
    }
  },
  methods: {
    uploadcheck () {
      try {
        if (this.text.form.sectionId === null) { throw new Error('请选择科目') }
        if (this.text.form.title === '') { throw new Error('标题不能为空') }
        if (parseFloat(this.text.form.sectionId).toString() === 'NaN') {
          this.createnewsection.sectionName = this.text.form.sectionId
          request({
            url: '/section',
            method: 'post',
            data: this.createnewsection
          }).then(res => {
            return request({ url: '/section' })
          }).catch(err => {
            if (err) {
              this.$message({
                message: '添加科目出错',
                type: 'error',
                duration: 3000
              })
            }
          }).then(res => {
            console.log(res)
            this.options = res.data.sections
            this.options.forEach(element => {
              if (element.sectionName === this.text.form.sectionId) {
                this.text.form.sectionId = element.sid
                // console.log('kk' + this.text.form.sectionId)
                this.upload()
              }
            })
          })
        } else {
          // console.log("zz"+this.text.form.sectionId)
          this.upload()
        }
      } catch (error) {
        // console.log(error)
        this.$message({
          message: error,
          type: 'error',
          duration: 1500
        })
      }
    },
    upload () {
      this.text.form.content = this.detailedcontent + '@#@' + this.url
      request({
        url: '/thread',
        method: 'post',
        data: this.text.form
      }).then(res => {
        // console.log(res.data);
        // console.log(res.status);
        this.$message({
          message: '上传成功',
          type: 'success',
          duration: 1500
        })
      }).catch(err => {
        if (err) {
          this.$message({
            message: '上传失败',
            type: 'error',
            duration: 1500
          })
        }
      })
    },
    open1 () {
      this.$notify({
        title: '关于图片上传',
        dangerouslyUseHTMLString: true,
        message:
          '<strong>需要您先将图片上传至<a href="https://sm.ms/" target="_blank">https://sm.ms/</a>，然后将获得的图片url地址填入下面的图片Url框中</strong>'
      })
    },
    getid (item) {
      // console.log("科目是"+item)
      this.text.form.sectionId = item
    }
  }
}
</script>

<style lang="less" scoped>
.upload-demo {
  margin-top: 30px;
  height: 200px;
  width: 690px;
}

.btn {
  position: absolute;
  transform: translate(300px, -80px);
}

.chooser {
  position: absolute;
  transform: translate(160%, -200px);
  width: 240px;
}

// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
// .avatar-uploader .el-upload:hover {
//   border-color: #409eff;
// }
// .avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   margin-top: 10%;
//   height: 60px;
//   width: 550px;
//   line-height: 178px;
//   text-align: center;
// }
// .avatar {
//   width: 1780px;
//   height: 1780px;
//   display: block;
// }
#button {
  width: 590px;
}
</style>
